<template>
  <!-- 热门标签模块 -->
  <div class="sidebar">
    <div class="side-right">
      <h2 class="side-title">热门标签</h2>
      <ul class="side-lis clearfix">
        <li v-for="(items, index) in sideLis">{{ items.uname }}</li>
      </ul>
    </div>
    <div class="side-right">
      <h2 class="side-title">推荐文章</h2>
      <ul class="article-small clearfix">
        <li
          class="clearfix"
          v-for="(item, index) in hotArticle"
          :key="item._id"
        >
          <a :href="`/article/${item._id}`" @click="getArticles">
            <span class="small-img"
              >
         <img :src="baseURL + item.coverUrl" alt=""
            /></span>
            <span style="color: #000; font-weight: 700; font-size: 16px">
            {{
              item.title
            }}</span>
            <span class="small-txt">{{ item.describe }}</span>
            <span class="small-muted"
              ><i class="muted-time">{{ formatDate(item.date) }}</i
              ><i class="muted-n">{{ item.readingNum}} 次浏览</i></span
            >
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "HotLabels",
  data() {
    return {
      sideLis: [
        { uname: "博客" },
        { uname: "生活" },
        { uname: "关于我" },
        { uname: "html" },
        { uname: "css" },
        { uname: "js" },
        { uname: "vue" },
        { uname: "node" },
        { uname: "唯美" },
        { uname: "娱乐" },
        { uname: "搞笑" },
      ],
      hotArticle: [],
    };
  },
  methods: {
     // 时间格式转换
    formatDate(date) {
      let d = new Date(date),
        YY = d.getFullYear(),
        MM = d.getMonth() + 1,
        DD = d.getDate(),
        hh = d.getHours(),
        mm = d.getMinutes(),
        ss = d.getSeconds();
      hh = hh < 10 ? "0" + hh : hh;
      mm = mm < 10 ? "0" + mm : mm;
      ss = ss < 10 ? "0" + ss : ss;
      return `${YY}-${MM}-${DD}`;
    },
    // 请求所有的文章数据
    async getArticles() {
      let { data } = await this.$axios({
        method: "GET",
        url: "/getdata/article",
      });
      if (data.code) return this.$message.error(data.message);
      this.hotArticle = data.data.slice(0, 6); // 0-6下标位置的文章数据
    },
  },
  created() {
    this.getArticles();
  },
};
</script>

<style lang="less" scoped>
.sidebar .side-right {
  width: 100%;
  background-color: #fff;
  margin-bottom: 20px;
  border-radius: 10px;
}
.side-right .side-title {
  font-weight: 400;
  padding: 11px 15px 10px;
  border-bottom: 1px solid #eaeaea;
  background-color: #fbfbfb;
  font-size: 18px;
}
.side-right .side-lis {
  padding: 20px;
}
.side-right .side-lis li {
  float: left;
  margin: 10px;
  text-align: center;
  font-size: 12px;
  padding: 5px 10px;
  color: #666;
  background-color: #fff;
  border-radius: 5px;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 1px #ccc;
  cursor: pointer;
  transition: all 0.3s;
}
.side-right .side-lis li:hover {
  border: 1px solid rgb(127, 206, 238);
  color: pink;
}

.side-right .article-small li {
  display: block;
  border-left: 3px solid transparent;
  border-bottom: 1px solid #ccc;
  transition: all 0.3s;
  padding-bottom: 10px;
}
.side-right .article-small li:hover {
  border-left: 3px solid #81c53f;
  background-color: #fafff8;
  color: #fafff8;
}
.side-right .article-small li a {
  position: relative;
  clear: both;
  display: block;
  padding: 10px;
}
.article-small .small-img {
  float: left;
  width: 100px;
  height: 77px;
  margin-right: 15px;
  margin-left: 2px;
}
.small-img img {
  width: 100px;
  height: 77px;
}
.article-small .small-txt {
  display: block;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.article-small .small-muted {
  position: absolute;
  bottom: -10px;
  left: 128px;
  display: inline-block;
  color: #111110;
  font-weight: 700;
}
.small-muted .muted-time {
  margin-right: 20px;
}
</style>